import React from 'react';
import { Form, Row, DatePicker, Button, Select, Input, Col } from 'antd';
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { Option } = Select;

const SearchForm = ({ form: { getFieldDecorator, getFieldsValue, setFieldsValue }, onSearch, searchItem, resetForm, procedureData }) => {

  const handleChange1 = (value) => {
    console.log(value, 'handleChange1');
    if (value) {
      let a = procedureData.find(e => e.procedureName == value)
      setFieldsValue({ procedureCode: a.procedureCode })
    } else {
      setFieldsValue({ procedureCode: undefined })
    }
  }
  const handleChange2 = (value) => {
    console.log(value, 'handleChange2');
    if (value) {
      let a = procedureData.find(e => e.procedureCode == value)
      setFieldsValue({ procedureName: a.procedureName })
    } else {
      setFieldsValue({ procedureName: undefined })
    }
  }

  const formItemLayout = {
    // 抽屉里面Form。二列的布局比例
    labelCol: {
      span: 8
    },
    wrapperCol: {
      span: 16
    }
  };
  return (
    <Form className="search-form">
      <Row gutter={24}>
        <Col span={5}>
          <FormItem label="批号"{...formItemLayout}>
            {getFieldDecorator('batchNo', {
              initialValue: searchItem.batchNo || '',
              getValueFromEvent: (event) => {
                return event.target.value.replace(/\s+/g, "")
              },
            })(
              <Input placeholder='请输入批号' allowClear onPressEnter={() => onSearch(getFieldsValue())} />
            )}
          </FormItem>
        </Col>
        <Col span={5}>
          <FormItem label="适用工序"{...formItemLayout}>
            {getFieldDecorator('procedureName', {
              initialValue: searchItem.procedureName || undefined,
            })(
              <Select placeholder='请选择工序' allowClear onChange={(value) => handleChange1(value)}>
                {
                  procedureData.map(item => {
                    return <Option key={item.procedureName}>{item.procedureName}</Option>
                  })
                }
              </Select>
            )}
          </FormItem>
        </Col>
        <Col span={5}>
          <FormItem label="适用工序编码"{...formItemLayout}>
            {getFieldDecorator('procedureCode', {
              initialValue: searchItem.procedureCode || undefined,
            })(
              <Select placeholder='请选择工序编码' allowClear onChange={(value) => handleChange2(value)}>
                {
                  procedureData.map(item => {
                    return <Option key={item.procedureCode}>{item.procedureCode}</Option>
                  })
                }
              </Select>
            )}
          </FormItem>
        </Col>
        <Col span={4} style={{ display: 'flex' }} className="serarch-btns">
          <FormItem>
            <Button icon="search" type="primary" onClick={() => onSearch(getFieldsValue())}>
              {'查询'}
            </Button>
          </FormItem>
          <FormItem>
            <Button type="default" icon={'redo'} onClick={() => resetForm()}>
              {'重置'}
            </Button>
          </FormItem>
        </Col>
      </Row>
    </Form>
  );
};

export default Form.create()(SearchForm);
